.badge {
  cursor: default;
  @extend .d-inline-flex;
  @extend .align-items-center;
  font-weight: $badge-font-weight;
  font-size: $badge-font-size;
}
.badge i {
  @extend .mr-1;
  font-size: 100%;
}
.badge .ti {
  font-size: $badge-font-size;
  line-height: $badge-font-size
}

// Green
.badge-completed,
.badge-complete,
.badge-resumed,
.badge-considered_safe,
.badge-paid,
.badge-shipped,
.badge-active,
.badge-success,
.badge-sold,
.badge-open,
.badge-authorized,
.badge-published,
.badge-live,
.badge-processed,
.badge-success,
.badge-create,
.badge-approved,
.badge-resolved,
.badge-reimbursed,
.badge-allocation,
.bg-success {
  border: 1px solid transparent !important;
  background-color: #C6F6D5 !important;
  color: #22543D !important;
}

// Red
.badge-failed,
.badge-considered_risky,
.badge-error,
.badge-errored,
.badge-invalid,
.badge-rejected,
.badge-destroy,
.badge-closed,
.badge-canceled,
.badge-partially_canceled,
.badge-void,
.badge-danger {
  border: 1px solid transparent;
  background-color: #fee2e1 !important;
  color: #8e1f0b !important;
}

// Orange
.badge-returned,
.badge-credit_owed,
.badge-balance_due,
.badge-backorder,
.badge-checkout,
.badge-suspended,
.badge-archived,
.badge-warning,
.badge-ready, // unfulfilled
.bg-warning
{
  border: 1px solid transparent;
  background-color: rgba(255, 235, 120, 1);
  color: rgba(79, 71, 0, 1);
}

// light
.badge-processing,
.badge-pending,
.badge-paused,
.badge-awaiting_return,
.badge-cart,
.badge-inactive,
.badge-address,
.badge-delivery,
.badge-payment,
.badge-confirm,
.badge-disabled,
.badge-draft,
.badge-onboarding,
.badge-light,
.badge-authorize,
.badge-eligible,
.badge-invited {
  @extend .bg-white;
  @extend .text-muted;
  @extend .border;
  font-weight: $font-weight-normal;

  &:hover {
    @extend .bg-white;
    @extend .text-muted;
  }
}

.badge-notice,
.badge-update,
.badge-partial,
.badge-capture,
.badge-info {
  border: 1px solid transparent;
  background-color: #E0EFFE;
  color: #00527c;
}

.badge-dark {
  background-color: transparent !important;
  border: 1px solid $gray-800 !important;
  color: $white;
}